<script setup>
import DialogPro from "@/components/DialogPro.vue";
import { getShortcut } from "@/api/user.js";
import {onMounted, reactive, ref} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { useHomeStore } from "@/stores/home";
const useStore = useHomeStore();
const urlRef = ref();

const data = reactive({
  url: "",
  title: "",
  mediaQuery: window.matchMedia("(max-width: 768px)")
})

onMounted(() => {
  getShortcut(useStore.currentRightClickItem).then(res => {
    if (res.code === 20000) {
      data.url = res.retData.url
      data.title = res.retData.title
    } else {
      ElMessage({
        showClose: true,
        message: "获取失败",
        type: "error",
      });
    }
  })
});

function validateUrl(url) {
  const reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
  return reg.test(url);
}

const handleSubmit = () => {
  if (validateUrl(data.url)) {
    ElMessage({
      showClose: true,
      message: "接口暂未开发",
      type: "error",
    });
  } else {
    ElMessage({
      showClose: true,
      message: "输入的网址不正确",
      type: "error",
    });
  }
};
</script>

<template>
  <DialogPro v-model="useStore.showChangeUrlWindow" title="修改网址">
    <div class="form-wrapper">
      <el-form label-position="left">
        <el-form-item label="网址">
          <el-input
              ref="urlRef"
              v-model="data.url"
              placeholder="请输入添加网址"
              autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="名称">
          <el-input
              v-model="data.title"
              placeholder="留空则自动获取"
              autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" color="black" @click="handleSubmit">
        提交
      </el-button>
    </div>
  </DialogPro>
</template>

<style lang="less" scoped>
.form-wrapper {
  display: flex;
  flex-flow: column;
}
</style>